<template>
<nav>
      <ul class="pagination">
        <li v-show="page !== 1" class="page-item">
          <a @click="topage(page - 1)" class="page-link">Previous</a>
        </li>
        <li v-for="number in pageSum" :class="number == page ? 'page-item active' : 'page-item'"><a class="page-link"
            href="#" @click="topage(number)">{{number}}</a></li>
        <li v-show="page !== pageSum" class="page-item">
          <a @click="topage(page + 1)" class="page-link" href="#">Next</a>
        </li>
      </ul>
    </nav>
</template>

<script>
export default {
  name: 'MPage',
 props: ['pageSize', 'dataSum', 'page'],
computed: {
        pageSum: function () {
          return Math.ceil(this.dataSum / this.pageSize);
        },
      },
methods: {
        topage(page) {
          this.$emit('mpage-topage', page)
        }
      }
}
</script>
